<template>
	<view>
		<u-navbar placeholder fixed autoBack title="统计分析"></u-navbar>
		<view class="u-border-bottom position" style="background-color: #FFFFFF;">
			<u-tabs
				:list="[{ name: '人员' }, { name: '考勤' }]"
				:activeStyle="{
					color: '#21A5F3'
				}"
				:current="current"
				@change="e => (current = e.index)"
			></u-tabs>
		</view>
		<u-gap height="44px" bgColor="#FBFCFC"></u-gap>

		<view class="d-p-30" v-if="current == 0">
			<view><text class="d-font-36" style="font-weight: bold;">综合统计</text></view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex">
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人情况</view>
					<text class="d-font-24" style="color: #ADB4BD;">单位：人</text>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">实名制人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ ssu ? ssu.staffs : 0 }}</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">进场工人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ ssu ? ssu.istaffs : 0 }}</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">离场工人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ ssu ? ssu.ostaffs : 0 }}</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">考勤工人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ ssu ? ssu.atdStaffs : 0 }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-30">
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人分布</view>
					<text class="d-font-26" style="color: #8E9291;">单位: 人</text>
				</view>
				<chart :atd="atdData"></chart>
			</view>
		</view>
		<view class="d-p-30" v-else>
			<view><text class="d-font-36" style="font-weight: bold;">综合统计</text></view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex">
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">今日考勤</view>
					<text class="d-font-24" style="color: #ADB4BD;">单位：人</text>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">考勤人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.staffs : 0 }}</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">缺勤人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.unatdStaffs : 0 }}</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">考勤率</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.atdRate : 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import chart from '../components/chart.vue';
import { atdCount, appSsu, atdToday } from '../../../common/api.js';
export default {
	components: {
		chart
	},
	data() {
		return {
			current: 0,
			ssu: null, // 工人情况
			atd: null, // 今日考勤
			atdData: null // 工人分布
		};
	},
	onLoad() {
		this.appSsu();
		this.atdCount();
		this.atdToday(); // 今日考勤
	},
	methods: {
		atdCount() {
			// 工人分布
			atdCount({
				params: {
					bzbh: this.$user.ssgcxx[this.$appIndex].bzid // 班组id
				}
			}).then(e => {
				this.atdData = e.data;
			});
		},
		appSsu() {
			// 工人情况
			appSsu({
				params: {
					bzbh: this.$user.ssgcxx[this.$appIndex].bzid // 班组id
				}
			}).then(e => {
				this.ssu = e.data;
			});
		},
		atdToday() {
			// 今日考勤
			atdToday({
				params: {
					bzbh: this.$user.ssgcxx[this.$appIndex].bzid // 班组id
				}
			}).then(e => {
				this.atd = e.data;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.position {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;

		.sub-title {
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 22rpx;
				background: #13a4fe;
				border-radius: 4rpx;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
</style>
